<template>

  <div style="display: flex;justify-content: center;width: 100%;padding-right: 20px;
      padding-left: 20px;">
    <div :style="{'width': width}">
      <div style="display: flex;">
        <div style="color: black;padding-top: 50px;font-size: 35px;font-weight: bold;">{{"Most popular guide"}}</div>
      </div>
   
      <div style="display: flex;justify-content: space-between;align-items: center;">
        <div style="width: 30px;cursor: pointer;" >
          <div v-on:click="prevcarousel"class="btnhover"> <el-icon size="25px" color="#000"><ArrowLeftBold /></el-icon></div>
        </div>
      <el-carousel :loop="false" ref="elcarousel" arrow="never"  :interval="5000"  :autoplay="false" style="height: 590px;width: 100%;">
        <el-carousel-item v-for="groupitem,groupIndex in group" :key="groupIndex"
          style="height: 650px;padding-top: 34px;justify-content: center;">
          <div style="display: flex;justify-content: center;width: 100%;">
            <div style="display: grid;">
              <div class="groupitem">
                <div  v-for="item,index in groupitem.slice(0, groupsize/2)" :key="index" class="groupitem-item"
                  @click="openDetail(item)">
                  <img :src="item.image" class="Guid-image" />
                  <div class="title">{{item.title}}</div>
                  <el-rate v-model="item.score" disabled show-score text-color="#ff9900" score-template="" />
                  <div class="tips">{{item.days}} days {{item.nights}} nights , {{item.places}} places to visit </div>
                </div>

              </div>
              <div class="groupitem">
                <div  v-for="item,index in groupitem.slice(groupsize/2, groupsize)" :key="index" class="groupitem-item"
                  @click="openDetail(item)">
                  <img :src="item.image" class="Guid-image" />
                  <div class="title">{{item.title}}</div>
                  <el-rate v-model="item.score" disabled show-score text-color="#ff9900" score-template="" />
                  <div class="tips">{{item.days}} days {{item.nights}} nights , {{item.places}} places to visit </div>
                </div>

              </div>
        
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div style="width: 30px;">
        <div style="width: 30px;cursor: pointer;" >
          <div v-on:click="nextcarousel" class="btnhover" > <el-icon size="25px" color="#000"><ArrowRightBold /></el-icon></div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ArrowRightBold, ArrowLeftBold} from '@element-plus/icons-vue'
  import { ref, watch, onMounted, computed,onUnmounted  } from 'vue';
  import { getGuid } from '@/api/index';
  import { useRouter, useRoute } from 'vue-router';
  import { setToken,setUser,getUser } from '@/utils/auth';
  import cache from "@/plugins/cache";
  const routers = useRouter();
  const route = useRoute();
  const always = ref(true);
  const group = ref([]);
  const groupsize = ref('');
  const width = ref('');
  const user = getUser()
  groupsize.value= 8;
  width.value = '1240px';
  const elcarousel = ref(null);
  // 接收父组件传递的查询参数
  const props = defineProps({
    queryParam: {
      type: Object,
      required: true
    }
  });

  // 创建响应式变量来保存窗口大小
const windowWidth = ref(window.innerWidth);
const windowHeight = ref(window.innerHeight);

// 定义一个处理窗口大小变化的函数
const handleResize = () => {
  windowWidth.value = window.innerWidth;
  windowHeight.value = window.innerHeight;

  if(windowWidth.value<1240){
    groupsize.value= 6;
    group.value = chunkArray(list.value, groupsize.value);
    width.value = '1240px'
  }
  if(windowWidth.value>1240){
    groupsize.value= 8;
    group.value = chunkArray(list.value, groupsize.value);
    width.value = '1240px'
  }
};



  // 响应式变量
  const list = ref([]);

  // 获取数据列表
  function getList() {

    const query = {
      page: props.queryParam.page,
      size: props.queryParam.size,
      categorieList: (props.queryParam.categories && props.queryParam.categories.length > 0) ? props.queryParam.categories.join(",") : null,
      where: props.queryParam.where ? props.queryParam.where : "",
      region: props.queryParam.region ? props.queryParam.region : "",
      title: props.queryParam.title ? props.queryParam.title : "",
      noMine:(user && user.email)?user.email:'0'
    }


    getGuid(query).then(res => {
      // console.log(res);
      list.value = res.content;  // 使用 list.value 来更新 list
      // 分成每10个元素一个子数组
      group.value = chunkArray(list.value, groupsize.value);
      elcarousel.value.setActiveItem(0)
      console.log(group.value)
      handleResize()
    }).catch(error => {
      console.error('Failed to fetch data:', error);
    });
  }

  // 观察 queryParam 的变化并重新获取数据
  watch(() => props.queryParam, () => {
    getList();
  }, { deep: true });

  // 组件挂载后获取数据
  onMounted(() => {
    window.addEventListener('resize', handleResize);
    getList();
  });

  function openDetail(item) {
    cache.session.remove('events')
    console.log(route.path)
    cache.session.setJSON('prePath',route.path)
    routers.push({
      path: '/stepTwo',
      query: {
        id: item.id
      }
    })
  }

// 在组件卸载时移除 ResizeObserver 监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

  // 分块函数
  function chunkArray(array, chunkSize) {
    const result = [];
    for (let i = 0; i < array.length; i += chunkSize) {
      result.push(array.slice(i, i + chunkSize));
    }
    return result;
  }
  function nextcarousel() {
    elcarousel.value.next()
  }
  function prevcarousel() {
    elcarousel.value.prev()
  }
</script>
<style scoped>
  .el-carousel__container {
    height: 610px;
    width: 1659px;
  }

  .groupitem {
    display: flex;
    justify-content: center;
    gap:15px;
  }

  .scrollbar-flex-content {
    display: flex;

  }
.groupitem-item{
  width: 250px;
}
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
  }

  .Guid-image {
    width: 250px;
    height: 160px;
    border-radius: 10px;
  }

  .title {
    height: 40px;
    width: 250px;
    font-weight: 500;
    font-size: 24px;
    color: #000;
    margin-bottom: 0;
    text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/ 
    white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */ 
    overflow: hidden; /*超出部分隐藏*/
  }

  .tips {
    width: 269px;
    height: 50px;
    font-weight: 400;
    font-size: 18.0439px;
    line-height: 21px;
    color: #5a5a5a;
      /* 让长单词在容器内换行 */
      flex-wrap: wrap; /* 允许换行 */
  }

  .noneList {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 150px;
    line-height: 100px;
    padding: 20px;
    margin-right: 10px;
    border-radius: 20px;
    background-color: #fafafa;
  }
  .el-carousel__arrow .el-carousel__arrow--right{
    right: 0px;
  }.el-carousel__arrow--right{
    right: 0px;
  }
  .el-carousel__arrow .el-carousel__arrow--left {
    left: 0px;
}.el-carousel__arrow--left {
    left: 0px;
}
.btnhover{
  width: 35px;height: 35px;background-color: rgb(205 205 205);border-radius: 25px;padding: 5px;
}
.btnhover:hover{
  background-color: #919191;
}
</style>